<template>
  <div class="temp">
    <div class="temp-main">
      <slot />
    </div>
    <div v-if="showClear" class="temp-clear" @click="clear">
      <Icon
        :title="clearIcon.title"
        :name="clearIcon.icon"
        color="#D2E6F0"
        :font-size="iconSize"
      />
      <span class="temp-clear-title"> 清除 </span>
    </div>
    <div class="temp-close" @click="close"></div>
  </div>
</template>

<script>
import Icon from '@/components/icon'

export default {
  props: {
    showClear: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Icon
  },
  data() {
    return {
      iconSize: 20,
      clearIcon: {
        title: '清除',
        icon: 'qingchu'
      }
    }
  },
  beforeDestroy() {
    this.$emit('clear')
  },
  methods: {
    clear() {
      this.$emit('clear')
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.temp {
  position: relative;
  padding: 5px 0;
  border-radius: 8px;
  background-color: rgba(25, 59, 81, 1);
  display: flex;
  align-items: center;

  &-main {
    padding: 0 10px;
    position: relative;

    &::before,
    &::after {
      content: '';
      width: 1px;
      height: 50%;
      background: linear-gradient(
        180deg,
        rgba(142, 203, 240, 0.7) 0%,
        transparent 90%
      );
      position: absolute;
      top: 50%;
      right: 0;
    }

    &::after {
      transform-origin: top;
      transform: rotateZ(180deg);
    }
  }

  &-clear {
    padding: 0 10px;
    display: flex;
    align-items: center;

    &-title {
      margin-left: 2px;
      font-size: 14px;
      word-break: keep-all;
      cursor: pointer;
    }
  }

  &-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;

    &::after,
    &::before {
      content: '';
      width: 50%;
      height: 1px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: #fff;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }
  }
}
</style>
